<template>
    <div>
        <h3>自定义Form组件</h3>
        <div>
            <c-form :model="userInfo" :rules="rules" ref="userInfo">
                <c-form-item label="用户名" prop="username">
                    <c-input v-model="userInfo.username" placeholder="请输入用户名！"></c-input>
                </c-form-item>
                <c-form-item label="邮箱" prop="email">
                    <c-input v-model="userInfo.email" placeholder="请输入邮箱地址！"></c-input>
                </c-form-item>
                <c-form-item>
                    <button @click="handleSubmit('userInfo')">提交</button>
                </c-form-item>
            </c-form>

        </div>
    </div>
</template>

<script>
    import CForm from "./CForm";
    import CFormItem from "./CFormItem";
    import CInput from "./CInput";
    import Notice from "./Notice";
    import _extend_create from "./create_extend";
    import create from "./create";
    export default {
        components: {
            CInput,
            CFormItem,
            CForm,
        },
        data() {
            return {
                userInfo: {
                    username: "",
                    email: "",
                },
                show: true,
                rules: {
                    username: [{required: true, message: "请输入用户名"}],
                    email: [{required: true, message: "请输入邮箱"}],
                }

            }
        },
        methods: {
            handleSubmit(name) {
                this.$refs[name].validate(done => {
                    if (done) {
                        _extend_create(Notice, {
                                message: "提交成功"
                        })
                    } else {
                       create(Notice,{
                           props:{
                               message: "提交失败！"
                           }
                       })
                    }
                })
            }
        },
    }
</script>

<style scoped>

</style>